<template>
    <div id="box">
        <div class="tp">
            <div class="left">
                <div class="l-top">
                    <span>学生总数</span><br>
                    <span>{{WholeStudent}}</span>
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="kz" status="warning"></el-progress>
                    <span>{{dayn}}天内增加{{kz}}%</span>
                </div>
                <div class="l-bottom">
                    <span>总课程</span><br>
                    <span>{{count}}</span>
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="k"
                                 status="exception"></el-progress>
                    <span>{{day}}天内增加{{k}}%</span>
                </div>
            </div>
            <div class="center">
                <div class="c-top">
                    <span>新生</span><br>
                    <span>{{newNum}}</span>
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="kn"></el-progress>
                    <span>{{dayn}}天内增加{{kn}}%</span>
                </div>
                <div class="c-bottom">
                    <span>收费</span><br>
                    <span>￥2354.00</span>
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="70"
                                 status="success"></el-progress>
                    <span>20天内增加80%</span>
                </div>
            </div>
            <div class="right">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2263667072,120256770&fm=26&gp=0.jpg"
                     alt="">
            </div>
        </div>
        <div class="btm">
            <div class="left">
                <p>教师名单</p>
                <el-table :data="tableData1" style="width: 100%">

                    <el-table-column prop="name" label="老师姓名" width="140">
                    </el-table-column>
                    <el-table-column prop="workYear1" label="工龄" width="140">
                    </el-table-column>
                    <el-table-column prop="studentNum" label="学生">
                    </el-table-column>
                </el-table>
                <el-button type="warning" round @click="toTeacher">查看全部</el-button>
            </div>
            <div class="right">
                <p>学生名单</p>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="className"
                            label="班级"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Direktor"
                            label="班主任">
                    </el-table-column>
                    <el-table-column
                            prop="admissionDate"
                            label="入学时间">
                    </el-table-column>
                </el-table>
                <el-button type="warning" round @click="toStudent">查看全部</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'

    export default {
        name: "index",

        data: function () {
            return {
                tableData: [
                    {
                        name: '',
                        className: '',
                        Direktor: '',
                        admissionDate: '',
                    }
                ],
                tableData1: [
                    {
                        name: '',
                        workYear1: '',
                        studentNum: '',
                    }
                ],
                count: 0,//课程数量
                day: 15,//课程的天数
                days:365,//学生的天数
                dayn:20,//判断20天内新增的学生天
                countnum: 0,//day天内新增的课程数
                k: 0,//day天内新增课程所占的百分比
                countTime: 0,//课程创建的时间戳
                // url:'../assets/test.jpg'//教师图片地址
                teacherTime: 0,//教师加入的时间戳
                workYear: '',//工龄
                WholeStudent:0,//学生总数
                studentTime:0,//学生加入的时间戳
                usedNum:0,//老生数量
                newNum:0,//新生数量
                zNum:0,//dayn天内新增的学生数
                kz:0,//dayn天内新增的学生占总学生的百分比
                kn:0,//dayn天内新增的学生占新学生的百分比
            }
        },

        methods: {
            format(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`;
            },

            //获取总课程 计算课程表的相关数据
            getCourse: function () {
                this.$axios({
                    method: 'get',
                    url: '/course/allAvailable',
                })
                    .then(response => {
                        //获取课程总数量
                        this.count = response.data.count
                        for (var i = 0; i < this.count; i++) {
                            //获取课程创建的时间戳
                            this.countTime = response.data.data[i].courseCreatedTime
                            //获取当前时间的时间戳
                            var date = Date.now()
                            //获取两者时间戳的差，判断天数
                            date = date - this.countTime
                            var time = new Date(date);
                            var d = time.getDate();
                            // 当相差天数大于5天时
                            if (d > this.day) {
                                this.countnum++;
                            }
                        }
                        //计算百分比
                        this.k = parseInt(((this.countnum / this.count) * 100).toFixed(0))
                    })
                    .catch(error => {
                        console.log(error, 2);
                    });
            },
            //获取全部学生  计算学生的相关数据
             getWholeStudent: function () {
                this.$axios({
                    method: 'post',
                    url: '/student/findAllStudent',
                })
                    .then(response => {
                        //获取学生总数量
                        this.WholeStudent = response.data.data.length
                        for (var i = 0; i < response.data.data.length; i++) {
                            //获取学生加入的时间戳
                            this.studentTime = response.data.data[i].admissionDate
                            //获取当前时间的时间戳
                            var zdate = Date.now()
                            //获取两者时间戳的差，判断天数
                            var ztime = new Date(zdate);
                            var zy = ztime.getFullYear();
                            var zm = ztime.getMonth() + 1;
                            var zd = ztime.getDate();

                            var xtime = new Date(this.studentTime);
                            var xy = xtime.getFullYear();
                            var xm = xtime.getMonth() + 1;
                            var xd = xtime.getDate();
            
                            //当年数==0
                            if ((zy-xy)<=1) {
                                this.newNum++;//新生人数
                                if((zy-xy)==0){
                                     if(zd-xd<this.dayn){
                                   this.zNum++;//dayn天内新增人数
                                } 
                                }
                               
                            }   
                        }
                        //计算百分比
                        
                        this.kz = parseInt(((this.zNum/ this.WholeStudent) * 100).toFixed(0))//dayn天内新增的学生占总学生的百分比
                        this.kn = parseInt(((this.zNum/ this.newNum) * 100).toFixed(0))//dayn天内新增的学生占新学生的百分比
                    })
                    .catch(error => {
                        console.log(error, 2);
                    });
            },
            //获取老师的数据
            getTeacher: function () {
                this.$axios({
                    method: 'get',
                    url: '/teacher/list',
                    params: {
                        page: '1',
                        limit: '8',
                    }
                })
                    .then(response => {
                        this.tableData1 = response.data.data.list;
                        for (var i = 0; i < 10; i++) {
                            //获取教师加入的时间戳
                            this.teacherTime = response.data.data.list[i].entryTime
                            //获取当前时间的时间戳
                            var date = Date.now();
                            //获取两者时间戳的差，判断年数
                            date = date - this.teacherTime;
                            var time = new Date(date);
                            var y = time.getFullYear();
                            var m = time.getMonth() + 1;
                            var d = time.getDate();
                            console.log(y,m,d)
                            this.workYear = (y - 1970) + '年';
                            // 当相差年数等于1970时，说明教师工龄不足一年
                            if (y == 1970) {
                                //默认工龄不足30天，为不满一个月
                                if (m > 1) {
                                    this.workYear = m + '个月'
                                } else {
                                    this.workYear = '不足1个月'
                                }
                            }
                            //将每个老师的工龄渲染给每条数据
                            this.tableData1[i].workYear1 = this.workYear
                            //给学生数量加上100至150的随机数
                            this.tableData1[i].studentNum = Math.floor(Math.random() * (150 - 100)) + 100 + '人';
                        }
                    })
                    .catch(error => {
                        console.log(error, 2);
                    });
            },

            //获取学生数据
            getStudent: function () {
                this.$axios({
                    method: 'post',
                    url: '/student/findStudentByWhere',
                    params: {
                        page: '1',
                        limit: 8,
                    }
                })
                    .then(response => {
                        this.tableData = response.data.data.list;
                        for (var i = 0; i < this.tableData.length; i++) {
                            this.tableData[i].Direktor = '王丽';
                            //将时间戳数据转换格式
                            this.tableData[i].admissionDate = this.format(this.tableData[i].admissionDate);
                        }
                    })
                    .catch(error => {
                        console.log(error, 2);
                    });
            },

            //补零规则
            add0(m) {
                return m < 10 ? '0' + m : m
            },

            //将时间戳转换为日期格式
            format(shijianchuo) {
                //时间戳是整数，否则要parseInt转换
                var time = new Date(shijianchuo);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ';
            },

            //去教师页，查看全部信息信息
            toTeacher() {
                this.$router.push('/teacherList');
            },
            //去学生页，查看所有学生信息
            toStudent() {
                this.$router.push('/Student');
            }
        },
        created() {
            //获取课程
            this.getCourse();
            //获取教师
            this.getTeacher();
            //获取学生
            this.getStudent();
            //获取全部学生数据
            this.getWholeStudent();
        },
    }
</script>

<style scoped lang="less">
    .tp {
        .echarts {
            width: 100%;
            height: 100%;
        }

        .left, .center, .right {
            float: left;
            height: 250px;
            background: #f4f4f4;
        }

        .left, .center {
            width: 24%;
        }

        .l-top, .c-top {
            width: 100%;
            height: 48%;
        }

        .l-bottom, .c-bottom {
            margin-top: 2%;
            width: 100%;
            height: 48%;
        }

        .center {
            margin-left: 2%;
        }

        .right {
            margin-left: 2%;
            width: 48%;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .btm {
        .left, .right {
            float: left;
            height: 700px;
            margin-top: 10px;
        }

        .left {
            width: 35%;

            .el-button {
                margin-left: 20%;
                margin-top: 20px;
            }

            .content {
                margin-top: 5px;
                height: 50px;
                width: 100%;


                .img, span {
                    float: left;
                }

                .img {
                    width: 15%;
                }

                span {
                    width: 27%;

                }

                .span {
                    font-size: 12px;
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }

                span {
                    margin-top: 10px;
                }
            }

        }

        .right {
            width: 63%;
            margin-left: 2%;

            .el-table {
                th, td {
                    padding: 0;
                }
            }

            .el-button {
                margin-left: 40%;
                margin-top: 20px;
            }

        }
    }


</style>